<template>
  <div class="newsinfo">
    <!-- newinfo==={{id}} -->
    <header>
      <h1 class="title">{{newsinfo.title}}</h1>
      <div class="des">
        <span class="add_time">
          {{newsinfo.add_time}}
        </span>
        <span class="click">
          点击了{{newsinfo.click}}次
        </span>
      </div>
    </header>
    <!-- body  -->
    <div class="content">
      {{newsinfo.content}}
    </div>

    <!-- 评论 -->
    <Comment :id="id">

    </Comment>

  </div>
</template>
<script>
// @是一个绝对路径 相当于src
import Comment from '@/components/Commment'
export default {
  data: () => ({
    id: '',
    newsinfo: {}
  }),
  created() {
    this.id = this.$route.params.id
    this.getNewsInfoById()
  },
  methods: {
    async getNewsInfoById() {
      try {
        const { data: { message } } = await this.Api.getNewsInfoById(this.id)
        this.newsinfo = message
        console.log(message)
      } catch (error) {
        this.$Toast('请求新闻详情失败')
      }
    }
  },
  components: {
    Comment
  }
}
</script>
<style lang="less" scoped>
.newsinfo{
    padding: 10px;
    header{
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        .title{
            font-size: 16px;
            text-align: center;
        }
        .des{
            display: flex;
            justify-content:space-between;
           margin-top: 20px;
           font-size: 12px;
           .add_time{
               color: #1989fa;
           }
        }
    }
}
</style>
